import instance from '../axios/index'

import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
import '../css/my.css'

function UseModify() {
    const navigate = useNavigate();

    const [useName, setUseName] = useState({
        id: '',
        title: '',
        jifen: '',
        avater: '',
        phone: ''
    })
    const yibuFetcher = async () => {
        const id = sessionStorage.getItem('id')
        const { data: { code, data } } = await instance({ url: `/my/getUseName?id=${id}` })
        if (code === 200) {
            console.log(data, 'ssssss');
            const arr = { ...useName }
            arr.title = data.name
            arr.jifen = data.jifen
            arr.avater = data.avater
            arr.phone = data.phoneNumber
            arr.id = data._id
            setUseName(arr)
        }
    }
    useEffect(() => {
        yibuFetcher()
    }, [])

    const selectName = (e) => {
        const arr = { ...useName }
        arr.title = e.target.value
        setUseName(arr)

    }
    const selectjifen = (e) => {
        const arr = { ...useName }
        arr.jifen = e.target.value
        setUseName(arr)
    }
    const selectPhone = (e) => {
        const arr = { ...useName }
        arr.phone = e.target.value
        setUseName(arr)
    }

    const props = {
        name: 'image',
        action: 'http://localhost:3000/my/upload',
        method: 'post',
        onChange(info) {
            console.log(info); // 打印所有信息

            if (info.file.status === 'done') {
                // 上传成功
                console.log(`${info.file.name} file uploaded successfully`); // 成功消息
                console.log('上传成功返回：', info.file.response); // 打印来自服务器的响应数据
                const data = info.file.response
                if (data.code === 200) {
                    const arr = { ...useName }
                    arr.avater = data.url
                    setUseName(arr)
                    message.success(data.msg)
                }
            } else if (info.file.status === 'error') {
                // 上传失败
                console.error(`${info.file.name} file upload failed.`); // 失败消息
            }
        },
    };
    const fanhui = async () => {
        const { data: { code, msg } } = await instance({ url: '/my/updateUseName', method: 'post', data: useName })
        if (code === 200) {
            message.success(msg)
            
            navigate('/my')
        } else {
            message.error(msg)
        }
    }

    return (<div>
        <div className='useModify'>
            <div>
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>上传图片</Button>
                </Upload>
            </div>
            <div>
                <p>姓名：<input type="text" value={useName.title} onInput={selectName} /></p>
                <p>积分：<input type='text' value={useName.jifen} onInput={selectjifen} /></p>
                <p>电话：<input type='text' value={useName.phone} onInput={selectPhone} /></p>
            </div>
            <div>
                <button onClick={fanhui} >返回</button>
            </div>
        </div>
    </div>)
}

export default UseModify;